<template>
  <div class="app-container">
    <el-card>
      <el-form :model="queryParams" ref="queryRef" v-show="showSearch" :inline="true" style="margin-top: 10px;">
        <el-form-item prop="workTargetId">
          <el-select style="width: 300px" v-model="queryParams.workTargetId" placeholder="请选择年度指标">
              <el-option
                v-for="dict in targetListDict"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
        </el-form-item>
        <el-form-item prop="targetTaskName">
          <el-input
            style="width: 300px"
            v-model="queryParams.targetTaskName"
            placeholder="请输入指标名称"
            clearable
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item prop="targetTaskStatus">
          <el-select style="width: 200px" v-model="queryParams.targetTaskStatus" placeholder="请选择状态" clearable>
            <el-option
              v-for="dict in task_status"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="loading" :data="taskList"><!-- :span-method="objectSpanMethod" -->
        <el-table-column min-width="5%" type="index" label="序号" align="center"/>
        <el-table-column min-width="15%" label="工作任务名称"  prop="targetTaskName"/>
       <!--  <el-table-column min-width="15%" label="工作任务目标" prop="taskContent"/> -->
        <el-table-column min-width="8%" label="完成时间" align="center" prop="targetTaskCompleteDate"/>
        <el-table-column min-width="8%" label="责任部门" align="center" prop="targetDeptName"/>
        <el-table-column min-width="8%" label="任务责任人" align="center" prop="targetRecipientName"/>
        <el-table-column min-width="8%" label="任务关联人" align="center" prop="targetAssociationName"/>
        <el-table-column min-width="8%" label="任务状态" align="center" prop="targetTaskStatus">
          <template #default="scope">
            <dict-tag :options="task_status" :value="scope.row.targetTaskStatus"/>
          </template>
        </el-table-column>
        <el-table-column min-width="8%" label="任务属性" align="center" prop="targetTaskProperties">
          <template #default="scope">
            <dict-tag :options="task_properties" :value="scope.row.targetTaskProperties"/>
          </template>
        </el-table-column>
        <el-table-column min-width="8%" label="主办单位" align="center" prop="targetTaskUnit"/>
        <el-table-column min-width="20%" label="操作" align="center">
          <template #default="scope">
            <el-button plain type="primary" icon="Check" @click="handleClaim(scope.row)" :disabled="scope.row.targetTaskStatus !== '2'">认领</el-button>
            <el-button plain type="primary" icon="Plus" @click="handleMatter(scope.row)" :disabled="scope.row.targetTaskStatus === '1' || scope.row.targetTaskStatus === '2'">创建事项</el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <pagination
        v-show="total>0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>
  </div>
</template>

<script setup name="TaskList">
import { listTarget } from "@/api/target/target";
import { listTargetTask, updateTargetTaskById } from "@/api/targetTask/targetTask";
import useUserStore from '@/store/modules/user'
import router from "@/router";
const userStore = useUserStore()

// 定义接收的 props  
const props = defineProps({
  targetId: Object  
}) 
const { proxy } = getCurrentInstance();
const { task_status, task_properties} = proxy.useDict('task_status', 'task_properties');

const taskList = ref([]);
const targetList = ref([]);
const targetListDict = ref([]);
const loading = ref(true);
const total = ref(0);
const showSearch = ref(true);

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    workTargetId: null,
    targetTaskName: null,
    targetTaskStatus: null,
    //targetRecipientId: userStore.id
  }
});

const { queryParams } = toRefs(data);

/** 查询工作任务列表 */
function getList() {
  loading.value = true;
  listTargetTask(queryParams.value).then(response => {
    taskList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}

/** 查询年度指标列表，生成下拉字典 */
function getTargetList(){
  listTarget(queryParams.value).then(response => {
    targetList.value = response.rows;
    response.rows.forEach(element => {
      targetListDict.value.push({'value': element.targetId, 'label': element.targetName})
    });
  });
}

const objectSpanMethod = ({ row, rowIndex, columnIndex }) => {  
  if (columnIndex !== 3) { // 总是从第一行开始检查合并  
    let spanCount = 1;  
    let currentId = row.targetTaskId;  
  
    // 从当前行开始，向下查找具有相同targetTaskId的行  
    for (let i = rowIndex + 1; i < taskList.value.length; i++) {  
      if (taskList.value[i].targetTaskId === currentId) { // 假设第四列的columnIndex为3（从0开始计数）  
        spanCount++;  
      } else {  
        break;  
      }  
    }  
  
    // 只有在需要合并时才返回合并的rowspan和colspan  
    if (spanCount > 1) {  
      return {  
        rowspan: spanCount,  
        colspan: 1 // 通常这里设置为1，除非您有特定列需要跨越多列  
      };  
    }  
  }  
  
  // 对于非合并的单元格或已合并行的后续行，返回默认值  
  return {  
    rowspan: 1, // 对于已合并行的后续行，设置rowspan为0以避免渲染额外的行  
    colspan: 1  
  };  
}; 

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}

/** 认领事项 */
function handleClaim(row) {
  updateTargetTaskById({targetTaskId: row.targetTaskId, targetTaskStatus: '3'}).then(response => {
    proxy.$modal.msgSuccess("认领任务成功");
    getList();
  });
}

/** 创建事项 */
function handleMatter(row){
  router.push({ path: "/matter/create", query: { targetTaskId: row.targetTaskId } });
}
getList();
getTargetList();
</script>
<style scoped>
.app-container {
  padding: 0px;
}

:deep(.el-card .el-card__body) {
  padding: 10px  !important
}
</style>